<template>
  <div>
          <div
            style="
              box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
              padding: 10px 20px;
              border-radius: 5px;
              margin-bottom: 10px;
            "
            >
            你好，{{ user.name }}，祝你开心每一天！
          </div>

          <div style="display:block">
            <el-card style="width: 100%; ">
              <div slot="header" class="clearfix">
                <span style="display: block; text-align: center;" class="system">项目管理系统欢迎您</span>
              </div>
              <div>
                  <div style="height: 300px;" class="block">
                    <el-carousel type="card" height="300px">
                      <el-carousel-item v-for="item in imgList" :key="item.id" name="创新创业">
                        <img style="object-fit: scale-down; width: 100%; height: 100%;" :src="item.imgurl" class="image"> //图片自适应
                      </el-carousel-item>
                    </el-carousel>
                  </div>
              </div>

            </el-card>
            <!-- 新增竞赛信息卡片 -->
            <!-- 新增竞赛信息卡片 -->
            <el-card style="margin-top: 20px;">
              <div slot="header" class="clearfix">
                <span style="display: block; text-align: center;" class="system">竞赛信息</span>
              </div>
              <el-table
                  :data="competitions"
                  style="width: 100%"
                  :row-style="{height: '60px'}"
              >
                <!-- 竞赛名称 -->
                <el-table-column prop="name" label="竞赛名称" width="200" align="center"/>
                <!-- 竞赛介绍 -->
                <el-table-column prop="intro" label="竞赛介绍" width="300" align="center"/>
                <!-- 报名时间 -->
                <el-table-column prop="signuptime" label="报名时间" width="150" align="center"/>
                <!-- 比赛时间 -->
                <el-table-column prop="competitionTime" label="比赛时间" width="150" align="center"/>
                <!-- 官网地址 -->
                <el-table-column label="官网地址" align="center">
                  <template slot-scope="scope">
                    <a
                        :href="scope.row.url"
                        target="_blank"
                        style="color: #409EFF; text-decoration: underline;"
                    >
                      {{ scope.row.url }}
                    </a>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
            <el-card>
              <el-calendar v-model="value"></el-calendar>
            </el-card>
          </div>
          
  </div>
</template>

<script>
export default {
    name:"Home",
    data(){
        return{
            user:JSON.parse(localStorage.getItem('honey-user')||'{}'),
            value: new Date(),
          competitions: [
          ],
            imgList: [

            ]
        }
    },
    created(){
this.load();
      this.load2();
    },
    methods:{
async load() {

    try {
      const response = await this.$request.get('/admin/selectImg');

      // 初始化班级数据，添加加载状态
      this.imgList = response.data

    } catch (error) {
      console.error('获取图片失败:', error);
    }
  }
,
      async load2() {

        try {
          const response = await this.$request.get('/admin/selectCompetitions');

          // 初始化班级数据，添加加载状态
          this.competitions = response.data

        } catch (error) {
          console.error('获取数据失败:', error);
        }
      }
      ,
}

}
</script>

<style scoped>
:deep(.el-calendar-table .el-calendar-day){
    width: 60px;
    height: 30px;
}
.system{
  font:oblique bold 25px "楷体";
  color: orangered;
  line-height: 30px;     
}
/* 字体属性的顺序：字体风格→字体粗细→字体大小→字体类型 */
 .block{
  background: #c8cfd8;
    width: 100%;
    text-align: center;
    /* margin-left: 142px; */
    /* width: 80.6%; */
    height: 100%;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }
/* 调整后的表格样式 */
.el-table .cell {
  font-size: 16px;
  padding: 0 15px;
  line-height: 1.5;
}
  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
</style>